<template>
    <div>
        <el-dialog title="注册" :visible.sync="registerVisible" width="300px" center>
            <el-form :model="registerForm" :rules="registerFormRules" ref="registerForm" class="demo-ruleForm">
            <el-form-item prop="userName">
            <el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid" v-model="registerForm.userName"></el-input>
            </el-form-item> 
            <el-form-item prop="password">
            <el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-view" v-model="registerForm.password"></el-input>
            </el-form-item> 
             <el-form-item prop="confirmPass">
            <el-input type="password" placeholder="请再次输入密码" prefix-icon="el-icon-view" v-model="registerForm.confirmPass"></el-input>
            </el-form-item> 
            <el-form-item>
            <el-button @click="onRegister" type="primary" size="medium" style="width:100%">注册</el-button>
            </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import api from "../http/usersApi"
    export default {
        data() {
                // 字母开头 5-16之间 允许字母数字下划线
                 let reg =/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
                //用变量来保存findUserName方法是否已经被执行过来
                let findUserName =false;
                let validateUserName=(rule,value,callback)=>{
                    if(!value){
                        findUserName=false;
                        return callback(new Error('请输入用户名'));
                    }
                    if(!reg.test(value)){
                        findUserName=false;
                        return callback(new Error('字母开头,长度5-16之间，字母数字下划线'))
                    }

                    // 判断当前findUserName是否已经通过后端校验，如果通过那么直接返回成功
                    if(findUserName) return callback()
                    api.findUserName({userName:value}).then(res=>{
                        let data=res.data;
                        if(data.code !=="001"){
                            return callback(new Error(data.msg))
                        }else{
                            // 通过的时候findUserName=true;
                            findUserName=true;
                            callback();
                        }
                    })
                };
                let validatePass=(rule,value,callback)=>{
                    if(!value){
                        return callback(new Error('请输入密码'));
                    }
                    if(!reg.test(value)){
                        return callback(new Error("字母开头，长度5-16之间，允许字母数字下划线"))
                    }
                    callback();
                };
                let validatePass2=(rule,value,callback)=>{
                    if(!value){
                        callback(new Error('请再次输入密码'));
                    }else if (value !==this.registerForm.password){
                        callback(new Error('两次输入密码不一致'));
                    }else{
                        callback();
                    }
                };
                return{
                        registerVisible:false,
                        registerForm:{
                            userName:"",
                            password:"",
                            confirmPass:""
                        },
                        registerFormRules:{
                            userName:[{validator:validateUserName,trigger:'blur'}],
                            password:[{validator:validatePass,trigger:'blur'}],
                            confirmPass:[{validator:validatePass2,trigger:'blur'}]
                        }
                     }
                 },
                 methods:{
                     showRegister(){
                         this.registerVisible=true;
                     },
                     onRegister(){
                         this.$refs.registerForm.validate(async (valid)=>{
                             // 没有通过校验就返回
                             if(!valid) return;
                             // 通过校验那么就去发送注册请求
                             let {data:res}=await api.register(this.registerForm);
                             if(res.code !=="001"){
                                 this.$notify.error({
                                     title:"错误",
                                     message:res.msg
                                 })
                             }else{
                                 this.registerVisible=false;
                                 
                                 this.$notify({
                                     title:'成功',
                                     message:res.msg,
                                     type:'success'
                                 })
                             }
                         })
                     }
                 }
            }
</script>

<style lang="scss" scoped>

</style>